<html  ng-app="phoneCatApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/PhoneListCtrl.js"></script>
</head>
<body >
<h1>AngularJS 扩展了 HTML</h1>
<hr>

<div>
    <p>名字：<input type="text" ng-model="name"> </p>
	<h1>Hello {{name}}</h1>
</div>

<h1>AngularJS 视图与模型</h1>
<hr>
<div >
	<ul ng-controller="PhoneListController">
		<li ng-repeat="phone in phones">
			<p>{{phone.name}}</p><p>{{phone.describe}}</p>
		</li>
	</ul>
</div>

<h1>AngularJS 计算定义数据的长度</h1>
<hr>
<div ng-controller="PhoneListController">获得定义数组的长度为：{{phones.length}}</div>


<h1>Angularjs 循环输出helloword </h1>
<hr>
<div>
	<ul ng-controller="helloworld">
		<li ng-repeat="tips in helloWord">
			<p>{{tips.name}}</p>
		</li>
	</ul>
</div>

<h1>AngularJS ng-repeat 控制循环</h1>
<hr>
	<table >
		<tr>
			<th>number</th>
		</tr>
		<tr ng-repeat="i in [1,2,3,4,5,6,7,8,9,0]">
			<td>{{i}}</td>
		</tr>
	</table>
	
<h1>AngularJS ng-repeat filter 过滤器</h1>
<hr>	
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span2">
				Search:<input ng-model="query"></div>
			<div class="span10">
				<ul class="phones" ng-controller="PhoneListController">
					<li ng-repeat="phone in phones | filter:query">
						{{phone.name}}<p>{{phone.describe}}</p>
					</li>
				</ul>	
		</div>
	</div>

<h1>AngularJS ng-repeat filter ordre by </h1>
<hr>		
	Search:<input ng-model="query" > 
		Sort by : 
			<select ng-model="orderProp">
				<option value="name">手机品牌</option>
				<option value="describe">描述内容</option>
			</select>
		<ul class="phones" ng-controller="PhoneListController">
			<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
				{{phone.name}}<p>{{phone.describe}}</p>
			</li>
		</ul>
</body>
</html>
